<template>
  <view class="page-body">
    <div class="flex head">
      <div class="flex-w-1 u-p-t-30">
        <div class="color-fff font-w-600 u-font-32">
          Hi，{{ userInfo.nickname || '某某某' }}
        </div>
        <div class="color-fff u-m-t-4" style="opacity: 0.6">
          欢迎来到提问首页 服务让生活更近的
        </div>
      </div>
      <image mode="aspectFill" :src="asyncImgs.chart_gpt.jiqiren"></image>
    </div>

    <div class="content">
      <div class="input-box">
        <!-- height="252" -->
        <u-input
          :clearable="false"
          maxlength="auto"
          type="textarea"
          v-model="inputValue"
          placeholder="您可以向Ai提出任何问题…"
          :auto-height="false"
          :custom-style="{height:'160rpx'}"
        ></u-input>
        <div class="flex-x-end u-m-t-20">
          <div @click="inputValue = ''" class="bt u-m-r-16">清空</div>
          <div @click="submit()" class="bt bt1">提交问题</div>
        </div>
      </div>

      <div class="item-1 u-m-t-30">
        <div class="flex-x-sb">
          <div class="font-w-600 u-font-30">热门提问</div>
          <div @click="getHotList()" class="color-999 u-font-26 flex-y-center">
            <text class=""> 换一换 </text>
            <div
              class="iconfont icon-exchangerate u-m-l-6"
              style="font-size: 40rpx"
            ></div>
          </div>
        </div>

        <div class="row-list">
          <div
            @click="$utils.toUrl('/chart-gpt/chart/chart?value=' + item.name)"
            v-for="item in hotData.list"
            :key="item.id"
            class="item u-line-1 u-m-t-24"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="item-1 u-m-t-30">
        <div class="flex-x-sb">
          <div class="font-w-600 u-font-30">提问模版</div>
          <div @click="getList()" class="color-999 u-font-26 flex-y-center">
            <text class=""> 换一换 </text>
            <div class="iconfont icon-arrow-right u-m-l-6"></div>
          </div>
        </div>

        <div class="col-list flex flex-wrap u-m-t-30">
          <div
            class="item u-m-b-22"
            v-for="item in listData.list"
            :key="item.id"
            @click="
              $utils.toUrl('/chart-gpt/chart/chart?value=' + item.question)
            "
          >
            <div class="font-w-600 u-line-1 u-m-b-20">{{ item.name }}</div>
            <div class="u-line-2 color-999">
              {{ item.question }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <FootNav :controlList="tabBarData"></FootNav>
  </view>
</template>
<script>
import tabBarData from '@/chart-gpt/static/js/tabbarJson.js';
import FootNav from "@/components/diyNew/footNav/index"
export default {
  components:{
    FootNav
  },
  data() {
    return {
      tabBarData,
      hotData: {
        list: [],
        page: 1,
        limit: 3,
        loadMore: 'loadmore',
      },
      listData: {
        list: [],
        page: 1,
        limit: 6,
        loadMore: 'loadmore',
      },
      inputValue: '',
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters['userInfo'];
    },
  },
  onLoad() {
    this.getHotList();
    this.getList();
  },
  onShow() {},
  methods: {
    async getHotList(reset) {
      if (reset) {
        this.hotData = this.$options.data().hotData;
      }
      let { loadMore } = this.hotData;
      if (loadMore == 'nomore') return;
      var formData = this.hotData;
      delete formData.list;
      const res = await this.$allrequest.chart.hotList(formData, true);
      if (res.data.list.length) {
        this.hotData.list = res.data.list;
      }
      this.hotData.loadMore = res.data.list.length < 3 ? 'nomore' : 'loadmore';
      this.hotData.page++;
    },
    async getList(reset) {
      if (reset) {
        this.listData = this.$options.data().listData;
      }
      if (this.listData.loadMore == 'nomore') return;
      var formData = this.listData;
      delete formData.list;
      const res = await this.$allrequest.chart.list(formData, true);
      if (res.data.list.length) {
        this.listData.list = res.data.list;
      }
      this.listData.loadMore =
        res.data.list.length < this.listData.limit ? 'nomore' : 'loadmore';
      this.listData.page++;
    },
    submit() {
      this.$utils.toUrl('/chart-gpt/chart/chart?value=' + this.inputValue);
    },
  },
  watch: {},
  onReachBottom() {},
  onPullDownRefresh() {},
};
</script>
<style lang="scss" scoped>
.page-body {
  min-height: 100vh;
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  .head {
    height: 184rpx;
    padding-left: 40rpx;
    background: #f0250e;
    image {
      width: 180rpx;
      height: 152rpx;
    }
  }
  .content {
    border-radius: 40rpx 40rpx 0 0;
    padding: 24rpx;
    background: #fff;
    margin-top: -40rpx;
    .iconfont {
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
    }
    .input-box {
      height: 300rpx;
      border-radius: 30rpx;
      padding: 24rpx;
      border: 1px solid #f0250e;
      /deep/.u-input__textarea {
        padding: 0;
      }
      .bt {
        padding: 0 40rpx;
        line-height: 72rpx;
        border-radius: 120rpx;
        background: #f2f2f2;
      }
      .bt1 {
        background: #f0250e;
        color: #fff;
      }
    }

    .row-list {
      .item {
        line-height: 88rpx;
        background: #f8f8f8;
        border-radius: 120rpx;
        padding: 0 24rpx;
      }
    }
    .col-list {
      .item {
        padding: 24rpx;
        width: 340rpx;
        height: 176rpx;
        background: #f8f8f8;
        border-radius: 30rpx;
        &:nth-child(2n) {
          margin-left: 22rpx;
        }
      }
    }
  }
}
</style>
